<template>
  <div>
    <Card>
      <div>
        <Button type="primary" ghost @click="addRole()">
          <Icon type="md-add"/>
          创建角色
        </Button>
      </div>

      <!--创建角色弹框-->
      <role-add ref="roleModal" :reloadData="reloadData"></role-add>
      <!--分配用户弹框-->
      <allot-role-user ref="allotRoleUserModal"></allot-role-user>

      <Table border :columns="columns" :data="roleList">
        <template slot-scope="{ row,index }" slot="name">
          <strong>{{ row.name }}</strong>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" size="small" style="margin-right: 5px" @click="edit(row,index)">编辑</Button>
          <Button type="info" size="small" style="margin-right: 5px" @click="allotRoleUser(row,index)">分配用户</Button>
          <Button type="error" size="small" @click="deleteData(row,index)">删除</Button>
        </template>
      </Table>

    </Card>
  </div>
</template>

<script>
  import {getRoleList, saveRole, deleteRole} from '@/api/base-manage/role'
  import RoleAdd from './role-add'
  import AllotRoleUser from './allot-role-user'


  export default {
    name: 'role_manage',
    components: {
      RoleAdd,
      AllotRoleUser
    },
    data() {
      return {
        roleList: [{role: 'adminTest', 'descript': '超级管理员'}],
        role_show: false,
        columns: [{
          title: '角色名',
          key: 'role',
          sortable: true
        },
          {
            title: '角色描述',
            key: 'descript',
            sortable: false,
            align: 'center',
            render(h, params) {
              console.log(params.row);
              if (params.row.descript && params.row.descript.length > 0) {
                return h('span', {}, params.row.descript)
              } else {
                return h('span', {}, '-')
              }
            }
          },
          {
            title: '操作',
            key: 'action',
            slot: 'action'
          }
        ]
      }
    },
    mounted() {
      this.reloadData()
    },
    methods: {
      reloadData() {
        getRoleList().then(res => {
          this.roleList = res.data
        })
      },
      deleteData(row, index) {
        deleteRole({
          id: row.id
        }).then(res => {
          console.log(res)
          if (res.data.success) {
            this.$Message.success('删除成功')
            this.reloadData()
          } else {
            this.$Message.error('删除失败')

          }
        })
      },
      addRole() {
        this.$refs.roleModal.show();
        this.$refs.roleModal.initData('')
      },
      edit(row, index) {
        this.$refs.roleModal.show();
        this.$refs.roleModal.initData(row)
      },
      allotRoleUser(row,index){
        this.$refs.allotRoleUserModal.show(row);
      }
    },
  }
</script>

<style scoped>

</style>
